@charset "UTF-8";
@import "parameters";
body,html{height:100%;overflow:hidden;}
body{  background-color: #fff;}
//直播间
#alert1{
  width:100%; height:100%;
  position:fixed; top:0; left:0;
  background:rgba(0,0,0,0.5);
  z-index: 9999999999;
  display: none;
  overflow: hidden;
  /*.return{
    width: 3.2rem;
    height: 0.7rem;
    line-height: 0.7rem;
    margin: 0.28rem auto;
    text-align: center;
    background-color: $color-second;
    border-radius: 5px;
    color: #fff!important;
    a{
      color: #fff!important;
    }
  }*/
  .chart_con{
    width:100%;
    height: 7.77rem;
    background:rgba(255,255,255,1);
    position:fixed;
    left:0;
    bottom:0;
    .head{
      width: 90%;
      padding: 0 5%;
      height: 0.98rem;
      line-height: 0.98rem;
      text-align: left;
      border-bottom: $color-third 1px solid;
      color: #3c3c3c;
      font-size: 0.3rem;
     a{
       float: right;
       color: #3c3c3c;
     }
    }
    .no{
      text-align: center;
    }
    .chartList-con{
      width: 100%;
      height: 7rem;
      overflow-y: scroll;
      overflow-x: hidden;
      .chartList{
        .chart-list{
          width:90%;
          padding: 0.2rem 5% 0.43rem 5%;
          border-bottom: $color-third 1px solid;
          .chartImg{
            width: 0.8rem;
            height: 0.8rem;
            margin-right: 0.2rem;
            img{
              display: inline-block;
              width: 100%;
              height: 100%;
              border-radius: 0.8rem;
            }
          }
          .chartCon{
            width: 5.75rem;
            font-size: 0.24rem;
            color:$color-primary;
            position: relative;
            .top{
              width: 100%;
              .topNames{
                font-size: 0.2rem;
                position: relative;
                .del{
                  position: absolute;
                  left: 0.6rem;
                  top: 0;
                }
                .name{
                  color: #3c3c3c;
                  font-size: 0.26rem;
                  width: 5.75rem;
                  em{
                    float: right;
                    font-size: 0.22rem;
                  }
                }
                .txt{
                  margin-top: 0.23rem;
                  line-height: 0.36rem;
                }
                .time{
                  margin: 0.2rem 0 0.46rem 0;
                  .guan{
                    color: $color-second;
                    margin-left: 0.3rem;
                  }
                }
              }
              .topBtn{
                float: right;
                color: $color-second;
                font-size: 0.24rem;
                width: 0.76rem;
                line-height: 0.36rem;
                border:$color-third 1px solid;
                border-radius: 5px;
                text-align: center;
                position: absolute;
                right: 0;
                top: 0.4rem;
              }
              .topBtn2{
                color:$color-third;
                width: 1rem;
              }
            }
            .welcome{
              font-weight: bold;
              span{
                display: inline-block;
                width: 0.35rem;
                line-height: 0.35rem;
                border:$color-second 1px solid;
                color:$color-second;
                font-size: 0.2rem;
                text-align: center;
                border-radius: 3px;
                margin-right: 0.1rem;
              }
            }
          }
        }
      }
    }
  }
  .textBtn{
    position: fixed;
    left: 5%;
    bottom: 0;
    margin-top: 5%;
  }
}
.bigChartimg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  left:0;
  top:0;
  z-index:9999;
  cursor: pointer;
  display: table;
  .bigImg{
    width: 100%;
    display:table-cell; vertical-align:middle;
    img{
      display: inline-block;
      width: 100%;
      height: auto;
    }
  }
}

.main{
  width: 100%;
  overflow: hidden;
  #wrapper {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 48px;
    left: 0;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */
    #scroller {
      width: 100%;
    }
    .chartTop{
      font-size: 0.26rem;
      color: #3c3c3c;
      line-height: 0.4rem;
      width: 90%;
      margin: 0.3rem auto;
    }
    .ui-toplist{
      width: 90%;
      padding: 0 5%;
      color:$color-primary;
      .list1{
        height: 1.4rem;
        background-color: #fff;
        padding: 0.3rem;
        margin: 0.2rem 0;
        h1{
          font-size: 0.36rem;
          a{
            color: #5d5e61;
          }
        }
        .heng{
          width: 0.33rem;
          height: 0.04rem;
          background-color: $color-second;
          float: left;
          margin: 0.3rem 0 0.2rem 0;
        }
        p{
          font-size: 0.24rem;
        }
      }
      .list2{
        height: 1.67rem;
        padding: 0.45rem 0.3rem;
        background-color: #fff;
        font-size: 0.28rem;
        .title{
           font-weight:bold;
          margin-bottom: 0.2rem;
        }
        ul{
          li{
            line-height: 0.42rem;
          }
        }
      }
    }
    .msgList{
      width: 90%;
      padding: 0 5%;
      text-align:left;
      .news{
        width: 100%;
        overflow: hidden;
        margin-top: 0.38rem;
        font-size: 0.24rem;
        color: #5d5e61;
        margin-bottom: 0.5rem;
        .headImg{
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.26rem;
          img{
            display: inline-block;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            border-radius:0.8rem;
          }
        }
        .sendNews{
          max-width:5.5rem;
          margin-left: 0.1rem;
          position: relative;
          .new{
            margin-top: 0.3rem;
          }
          .dian{
            display: inline-block;
            width: 0.18rem;
            height: 0.18rem;
            border-radius: 0.18rem;
            background-color: #ff8a00;
            position: absolute;
            right: -0.2rem;
            top: 0;
            z-index: 22;
          }
          .name{
            em{
              font-weight:bold;
              margin-right: 0.15rem;
            }
          }
          .newCon2{
            background-color: #d8eaf7;
            padding: 0.28rem;
            border-radius: 0 0.5rem 0.5rem 0;
            z-index: 2;
            position: relative;
            color: #44a9ef;
            .bg16{
              position: absolute;
              left: -10px;
              top: -1px;
            }
            .bg26{
              position: absolute;
              left: -10px;
              top: 0px;
            }
          }
          .newCon{
            padding: 0.28rem;
            border-radius: 0 0.5rem 0.5rem 0;
            z-index: 2;
            border: #55b7ff 1px solid;
            position: relative;
            color: #55b7ff;
            .question,.answer{
              display: block;
            }
            .question{
              padding-bottom: 0.2rem;
              border-bottom:#9ecf51 1px solid;
              margin-bottom: 0.2rem;
            }
            .bg16{
              position: absolute;
              left: -10px;
              top: -1px;
            }
            .bg26{
              position: absolute;
              left: -10px;
              top: 0px;
            }
            em{
              text-align: right;
              float: right;
              color: #44a9ef;
              font-size: 0.24rem;
              margin-left: 0.4rem;
            }
            .smallImg{
              display: inline-block;
              width: 2rem;
              height: auto;
            }
          }
          .zan{
            .icon20{
              margin-top: -1px;
            }
          }
        }
        .time{
          color: #fff;
          font-size: 0.24rem;
          text-align: center;
          margin-bottom: 0.25rem;
          width: 1.98rem;
          line-height: 0.44rem;
          background-color: #d6d8da;
          border-radius: 5px;
        }
      }
    }
  }

  .ui-text{
    width: 100%;
    background-color: #d8eaf7;
    position: absolute;
    left: 0;
    bottom:0;
    z-index: 999;
    overflow-x: hidden;
    .audios{
      ul{
        li{
          display: inline-block;
          text-align: center;
          line-height: 0.98rem;
          .bgIcon{
            display:inline-block; overflow:hidden;
            background-repeat: no-repeat;background-image:url(../../static/images/bgIcon.png);
            background-size: 2.56rem auto;
            vertical-align: middle;
          }
          .bg14{
            margin:0 0.14rem;
            width:0.6rem; height:0.6rem; background-position: -0.02rem -2.88rem;
          }
          .bg34 {
            margin:0 0.14rem;
            width:0.6rem; height:0.6rem; background-position: -0.88rem -4.46rem;
          }
          .bg23{
            margin-right: 0.1rem;
            width:0.6rem; height:0.6rem; background-position: -1.66rem -3.5rem;
          }
        }
        li.current{
          color: $color-second;
        }
        .txtInput,button{
          display: inline-block;
          border-radius: 5px;
        }
        .txtInput{
          width:4.1rem;
          height: 0.6rem;
          border: #44a9ef 1px solid;
          margin: 0 0.1rem 0 0.2rem;
          background-color: #fff;
        }
        .txtInput2{
          width:5.7rem;
          height: 0.6rem;
          border: #44a9ef 1px solid;
          margin: 0 0.1rem 0 0.2rem;
          background-color: #fff;
        }
        button{
          width: 1.2rem;
          line-height: 0.65rem;
          border:none;
          background-color: #44a9ef;
          color: #fff;
          font-size: 0.3rem;
          position: relative;
          top: 0.04rem;
        }
        .sendBtn{
          width:4.1rem;
          margin: 0.2rem 0.1rem 0 0;
          border: #44a9ef 1px solid;
          background: none;
          color: #3c3c3c;
        }
        .audioIcon01{
          width: 30px;
          height: 30px;
        }
      }
      .content{
        width: 100%;
       /* position: absolute;
        left: 0;*/
        background-color: #fff;
        .conList{
          width: 100%;
          position: relative;
          background-color: #fff;
          .audio{
            background-color: #fff;
            text-align: center;
            width: 90%;
            margin-bottom: 0.5rem;
             p{
               color: #5d5e61;
               font-size: 0.24rem;
               padding: 0.48rem 0 0.45rem 0;
             }
            .audioIcon{
              width: 101px;
              height: 101px;
            }
            .luzhi{
              color:$color-second;
              padding-left: 14%;
              span{
                color:#5d5e61;
                display: inline-block;
                width: 0.92rem;
                line-height: 0.38rem;
                border: #ccc 1px solid;
                border-radius: 5px;
                text-align: center;
                float: right;
              }
              em{
                font-size: 0.24rem;
                margin: 0 0.4rem;
              }
            }
          }
          .msg,.msg2,.msg3{
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 0.28rem;
            line-height: 1rem;
            position: absolute;
            left: 0;
            top: -1rem;
            background: rgba(56,173,255,0.9);
          }
          .msg2{
            background: rgba(252,47,47,0.9);
          }
          .textT{
            width: 90%;
            padding: 0.17rem 0;
            .inputTxt{
              display: inline-block;
              width: 5.4rem;
              line-height: 0.7rem;
              border: #d9d9d9 1px solid;
              background-color: #f3f3f5;
              border-radius: 5px;
            }
            .btnSend{
              display: inline-block;
              width: 1rem;
              line-height: 0.7rem;
              border: $color-second 1px solid;
              background-color: $color-second;
              border-radius: 5px;
              margin-left: 0.2rem;
              color: #fff;
              font-size: 0.28rem;
            }
          }
          .uploadImg{
            width: 5rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            background-color: $color-second;
            color: #fff;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            font-size: 0.32rem;
            margin: 0.82rem auto 0.82rem auto;
            input{
              position: absolute;
              left: 0%;
              top: 0%;
              font-size: 0.6rem;
              opacity: 0;
            }
          }
          .chartList{
            width: 60%;
            margin: 0.6rem auto;
            dl{
              float: left;
              width: 30%;
              text-align: center;
              position: relative;
              dd{
                color: #5d5e61;
                font-size: 0.24rem;
                margin-top: 0.22rem;
              }
              input[type="file"]{
                position: absolute;
                left:0;
                top:0;
                font-size: 36px;
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
  .position01{
    bottom:29%;
  }
  .position02{
    bottom:8.4%;
  }
  .position03{
    position: absolute;
    bottom:0;
  }
  .position04{
    bottom:21.5%;
  }
}
.fix01{
  bottom: 46%!important;
}
.fix001{
  bottom: 40%!important;
}
.fix02{
  bottom: 26%!important;
}
.fix002{
  bottom: 20%!important;
}
.fix03{
  bottom: 36%!important;
}
.fix003{
  bottom: 34%!important;
}
.fix04{
  bottom: 38%!important;
}
.fix004{
  bottom: 32%!important;
}
.ui-rnews{
  text-align: left;
  position: absolute;
  right: 5%;
  bottom: 20%;
  z-index:2;
  .send{
    width: 100%;
    margin-bottom: 0.1rem;
    .txt{
      max-width: 2.5rem;
      padding: 0.1rem;
      background:rgba(0,0,0,0.4);
      border-radius: 5px;
      font-size: 0.24rem;
      color: #fff;
      margin-right: 0.1rem;
    }
    img{
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 0.4rem;
    }
  }

}
.chartline{
  position: absolute;
  right: 5%;
  bottom: 16%;
  z-index:2;
  margin-bottom: 5%;
  /*.fr{
    width: 1.4rem;
    height: 34px;
    line-height: 34px;
    background-color: #575757;
    border-radius: 20px;
    margin-left: 0.2rem;
    a{
      color:#fff;
    }
  }*/
}
.charts{
  width:100%;
  background:rgba(255,255,255,1);
  position:absolute;
  left:0;
  bottom:0;
  z-index: 999999999;
  .head{
    height: 0.98rem;
    line-height: 0.98rem;
    text-align: center;
    border-bottom: $color-third 1px solid;
    color: #8f9194;
    font-size: 0.28rem;
    .icon26{
      margin-right: 0.15rem;
      margin-bottom: 0.03rem;
    }
  }
  .no{
    text-align: center;
  }
  .chartList-con{
    width: 100%;
    max-height: 8.8rem;
    overflow-y: scroll;
    overflow-x: hidden;
    .chartList{
      .chart-list{
        width:90%;
        padding: 0.2rem 5% 0.43rem 5%;
        border-bottom: $color-third 1px solid;
        .chartImg{
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.2rem;
          img{
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 0.8rem;
          }
        }
        .chartCon{
          width: 5.75rem;
          font-size: 0.24rem;
          color:$color-primary;
          position: relative;
          .top{
            width: 100%;
            .topNames{
              font-size: 0.2rem;
              position: relative;
              .del{
                position: absolute;
                left: 0.6rem;
                top: 0;
              }
              .name{
                color: $color-second;
              }
              .time{
                margin: 0.2rem 0 0.46rem 0;
                .guan{
                  color: $color-second;
                  margin-left: 0.3rem;
                }
              }
            }
            .topBtn{
              float: right;
              color: $color-second;
              font-size: 0.24rem;
              width: 0.76rem;
              line-height: 0.36rem;
              border:$color-third 1px solid;
              border-radius: 5px;
              text-align: center;
              position: absolute;
              right: 0;
              top: 0.4rem;
            }
            .topBtn2{
              color:$color-third;
              width: 1rem;
            }
          }
          .welcome{
            font-weight: bold;
            span{
              display: inline-block;
              width: 0.35rem;
              line-height: 0.35rem;
              border:$color-second 1px solid;
              color:$color-second;
              font-size: 0.2rem;
              text-align: center;
              border-radius: 3px;
              margin-right: 0.1rem;
            }
          }
        }
      }
    }
  }
}
#ppt {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  display: none;
  .ppt-con {
    width: 100%;
    height: 7.76rem;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    left: 0;
    bottom: 0;
   /* .delete{
      color: #3c3c3c;
      font-size: 0.26rem;
      line-height: 0.92rem;
      border-bottom: $color-third 1px solid;
      text-align: right;
      padding-right: 5%;
      margin-bottom: 0.3rem;
    }*/
    .addpptBtn{
      width: 100%!important;
      position: absolute;
      left: 0;
      bottom:0;
      background-color: #32a2f8;
      color: #fff;
      font-size: 0.3rem;
      text-align: center;
      line-height: 0.98rem;
      input{
        position: absolute;
        left: 0;
        top:0;
        font-size: 0.65rem;
        opacity: 0;
      }
    }
    .pptImg{
      width: 90%;
      margin: auto;
      ul{
        overflow: hidden;
        margin-left: -0.1rem;
        margin-right: -0.1rem;
        margin-top: 0.4rem;
        li{
          width: 2.11rem;
          height: 1.2rem;
          text-align: center;
          float: left;
          margin: 0.1rem;
          img{
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .del,.nos,.add{
      width: 90%;
      line-height: 0.8rem;
      text-align: center;
      border: #000 1px solid;
    }
    .delBtn{
      width: 6rem;
      position: absolute;
      left: 5%;
      bottom:3px;
    }
  }
}
.ask_con {
  width: 3.44rem;
  height: 3.2rem;
  background: rgba(0, 0, 0, 0.57);
  position: fixed;
  left: 50%;
  bottom: 50%;
  margin-left: -1.72rem;
  margin-right: 1.6rem;
  border-radius: 5px;
  color: #fff;
  font-size: 0.32rem;
  z-index: 9999999;
  display: none;
  p{
    text-align: center;
    margin-top: 0.22rem;
    color: #fefefe;
    font-size: 0.24rem;
  }
  .audio{
    text-align: center;
    font-size: 0.24rem;
    margin: 0.4rem 0;
    i,span{
      display: block;
    }
    i{
      margin-bottom: 0.17rem;
    }
  }
  .btns{
    width: 100%;
    line-height: 0.92rem;
    border-top: $color-gray4 1px solid;
    font-size: 0.26rem;
    a{
      display: inline-block;
      width: 100%;
      text-align: center;
    }
  }
}
#jia {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  display: none;
  .ppt-con {
    width: 100%;
    height: 4.1rem;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    left: 0;
    bottom: 0;
    .delete{
      color: #3c3c3c;
      font-size: 0.26rem;
      line-height: 0.92rem;
      border-bottom: $color-third 1px solid;
      text-align: right;
      padding-right: 5%;
      margin-bottom: 0.3rem;
    }
    .pptImg{
      width: 90%;
      margin: auto;
      dl{
        float: left;
        width: 33%;
        text-align: center;
        margin-top: 0.4rem;
        position: relative;
        dt{
          width: 1.22rem;
          height: 1.22rem;
          img{
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
        dd{
          color: #3c3c3c;
          font-size: 0.22rem;
          margin-top: 0.18rem;
        }
        input[type="file"]{
          position: absolute;
          left:20%;
          top:20%;
          opacity: 0;
        }
      }
    }
    .del,.nos,.add{
      width: 90%;
      line-height: 0.8rem;
      text-align: center;
      border: #000 1px solid;
    }
    .delBtn{
      width: 6rem;
      position: absolute;
      left: 5%;
      bottom:3px;
    }
  }
}


.ui-ppt{
  position: absolute;
  left:0;
  top:0;
  z-index: 2;
  width: 100%;
  height: 4.2rem;
  background-color: #131415;
  color: #fff;
  font-size: 0.24rem;
  box-shadow: 0px 1px 5px #ccc;
  .ppt-con{
    width: 4.7rem;
    margin: auto;
    .head{
      font-size: 0.32rem;
      font-weight:bold;
      margin-top: 0.76rem;
    }
    .head,p{
      text-align: center;
    }
    p{
      margin: 0.24rem 0;
    }
    ul{
      li{
        line-height: 0.36rem;
        margin-top: 0.24rem;
      }
    }
  }
  .pptImg{
    width: 6.3rem;
    height: 4.2rem;
    text-align: center;
    .swiper-container {
      width: 6.3rem;
      height: 4.2rem;
      margin: auto;
    }
    .swiper-slide {
      width: 6.3rem;
      height: 4.2rem;
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .pageNum{
    width: 0.8rem;
    line-height: 0.4rem;
    color: #fff;
    font-size: 0.24rem;
    background: rgba(0,0,0,0.7);
    border-radius:15px;
    text-align: center;
    position: absolute;
    left: 0.2rem;
    bottom: 0.2rem;
    z-index: 2;
  }
}
.ui-returnTop{
  position: absolute;
  right: 2%;
  top:0.5rem;
  z-index:3;
  width: 0.6rem;
  min-height: 1.8rem;
  border-radius: 5px;
  background:rgba(0,0,0,0.4);
  padding-bottom: 0.1rem;
  ul{
    li{
      width: 100%;
      text-align: center;
      height: 23px;
      line-height: 23px;
      margin-top: 0.1rem;
      color: #fff;
    }
  }
}
.textBtn{
  width: 90%;
  padding: 0.16rem 0;
  position: relative;
  input[type="text"]{
    width:5.5rem;
    line-height: 0.7rem;
    background-color: #f3f3f5;
    border-radius: 5px;
    border: $color-third 1px solid;
  }
  button{
    width:1rem;
    line-height: 0.7rem;
    background-color: #01AAED;
    color: #fff;
    border-radius: 5px;
    float: right;
    border: $color-second 1px solid;
    font-size: 0.28rem;
  }
  .askk{
    position: absolute;
    right: 1.5rem;
    top: 0.3rem;
    font-size: 0.28rem;
    .icon25{
      margin: 0 0.1rem 0 0.05rem;
    }
  }
}
.chartsBtn{
  background-color: #fff;
  padding:3% 5%;
  position: fixed;
  left:0;
  bottom:0;
  .askk {
    position: absolute;
    right: 1.8rem;
    top: 0.38rem;
  }
}